import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { Tag } from '@zendeskgarden/react-tags';
import { FauxInputStory } from './stories/FauxInputStory';
import { FAUX_INPUT_TAGS as TAGS } from './stories/data';

<Meta title="Packages/Tags/[patterns]" component={Tag} />

# Patterns

## FauxInput

A `Tag` can be used together with a child `span` in order to handle truncation.
Use the slider control to change the width of the `FauxInput` container. Text
within the tags will truncate with an ellipsis based on the available container
width.

<Canvas>
  <Story
    name="FauxInput"
    args={{ tags: TAGS, hasAvatar: false, hasClose: false, width: 25 }}
    argTypes={{
      hue: { table: { disable: true } },
      isRound: { table: { disable: true } },
      hasAvatar: { name: 'Tag.Avatar', table: { category: 'Story' } },
      hasClose: { name: 'Tag.Close', table: { category: 'Story' } },
      tags: { table: { category: 'Story' } },
      width: { control: { type: 'range', min: 10, step: 5 }, table: { category: 'Story' } }
    }}
  >
    {args => <FauxInputStory {...args} />}
  </Story>
</Canvas>
